<template>
    <div>
        <div class="loadiv" v-if="isModal">
            <smalloading class="loading"></smalloading>
        </div>
        <div class="nav">
            <div class="return" v-on:click="back()">
                <span class="arrow"></span>
                <span class="back">返回</span>
            </div>
            <div class="nav_text">
                <p style="margin-left : -20px">{{title}}</p>
            </div>
        </div>
        <div class="body">
            <ul v-for="item in menuList" :key="item.id" v-on:click="target_for(item)">
                <li>
                    <span class="left">退货单号：</span>
                    <span class="right">{{item.returnId}}</span>
                </li>
                <li>
                    <span class="left">订单号：</span>
                    <span class="right">{{item.orderId}}</span>
                </li>
                <li>
                    <span class="left">退货单类型：</span>
                    <span class="right" v-if="item.returnTypeId == 'CUSTOMER_RETURN'">销售订单退货单</span>
                    <span class="right" v-else>采购订单退货单</span>
                </li>
                <li>
                    <span class="left">退货单状态：</span>
                    <span class="right">{{item.statusName}}</span>
                </li>
                <li>
                    <span class="left">创建时间：</span>
                    <span class="right">{{item.createdStamp}}</span>
                </li>
            </ul>
        </div>
        <div class="mask" v-show="mask_show">
            <span>暂无数据</span>
        </div>
    </div>
</template>
<script>
import smalloading from './../../loading/smalloading'
export default {
    name: "component_name",
    data() {
        return {
            menuList: [],
            isModal: true,
            mask_show: false,
            title : ''
        }
    },
    components: {
        smalloading
    },
    methods: {
        back: function() {
            this.$router.push({ path: "/DeliveryScan" });
            // history.go(-1);
        },
        load_list: function() {
            this.isModal = true;
            this.$http.post("api/motor/getReturnInfoList2", {
                returnId: sessionStorage.getItem('qrcode'), storcode: localStorage.getItem('storcode') }).then(res => {
                this.isModal = false;
                let result = res.data;
                console.log(result)
                if (result.code == 101) {
                    this.isModal = false;
                    this.$layer.alert("当前用户已在其他设备登录")
                    this.$router.push({ path: '/' })
                    localStorage.removeItem("authorization");
                    return;
                }
                if(result.code == 102 ){
                    this.mask_show = true;
                    this.isModal = false;
                    this.$layer.alert(result.msg)
                }
                this.menuList = result.data ;
            }, err => {
                this.isModal = false;
                this.$layer.alert("未知错误")
                this.$router.push({ path: '/' })
                localStorage.removeItem("authorization");
            })
        },
        initList : function () {
            // if(sessionStorage.getItem('target_') == '')
        },
        target_for: function(item) {
            sessionStorage.setItem("returnId", item.returnId);
            sessionStorage.setItem('returnTypeId',item.returnTypeId ) ;
            let target_ = sessionStorage.getItem('target_') ;

            if(target_ == 'supplier'){
                this.$router.push({ path: '/ReturnSupplier' })
            }
            if(target_ == 'returnScan') {
                this.$router.push({ path: '/OnlyReadGoods' })
            }
        }
    },
    created: function() {
        sessionStorage.removeItem('sign_img');
        this.load_list();
        let target_ = sessionStorage.getItem('target_') ;

        if(target_ == 'supplier'){
            this.title = '供应商取货列表'
        }
        if(target_ == 'returnScan') {
            this.title = '退货单查询列表'
        }
    }
}
</script>
<style lang="css" scoped>
.loadiv {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1;
}

.loading {
  margin: 60% auto;
  z-index: 22;
}

.body {
  margin: 1rem 0;
  background: #fff;
}

ul {
  margin-top: 1rem;
  box-shadow: 0px 2px 4px #999;
}

li {
  font-size: 1.3rem;
  color: gray;
  height: 2rem;
  line-height: 2rem;
}

.left {
  padding: 0 1rem;
  display: inline-block;
  /* width: 60%; */
}

.right {
  float: right;
  margin-right: 5px;
}

.mask {
  left: 0;
  top: 0;
  opacity: 0.4;
  width: 100%;
  height: 100%;
  padding-top: 50%;
}

.mask span {
  width: 100%;
  font-size: 18px;
  margin-left: 37%;
  font-weight: bold;
  color: gray;
}

.arrow {
  border: 0.15rem solid #fff;
  border-width: 0.15rem 0 0 0.15rem;
  display: inline-block;
  height: 0.85rem;
  width: 0.85rem;
  -webkit-transform-origin: center center;
  -webkit-transform: rotate(135deg);
  -webkit-transition: all 0.5s ease-in 0.1s;
  transform-origin: center center;
  transform: rotate(-45deg);
  transition: all 0.5s ease-in 0.1s;
}

.return {
  width: 39%;
  padding-left: 1.5rem;
}

.back {
  font-size: 1.3rem;
  color: #fff;
}

.nav {
  line-height: 4.7rem;
  display: -webkit-box;
  background: #668292;
  height: 4.7rem;
}

.nav_text {
  font-size: 1.6rem;
  color: #fff;
}
</style>